<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,dl,dd,p,h1,h2,h3,h4,h5,h6 {margin: 0;}
        ol,ul,li {padding: 0;margin: 0;list-style: none;}
        img {border: none;width: 326px;height: 204px;}

        #wrap {
            width: 430px;
            height: 204px;
            margin: 50px auto;
            user-select: none;
        }
        #wrap .leftTab {
            width: 100px;
            height: 100%;
            float: left;
        }
        #wrap .leftTab li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #000;
            color: #fff;
            font-size: 12px;
            margin-bottom: 1px;
            cursor: pointer;
        }
        #wrap .leftTab li.on {
            background-color: #f60;
        }
        #wrap .content {
            position: relative;
            width: 326px;
            height: 204px;
            float: right;
        }
        #wrap .content .right {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        #wrap .content .right.on {
            display: block;
        }
        #wrap .content .right ul.img {
            position: relative;
            width: 100%;
            height: 100%;
        }
        #wrap .content .right ul.img li{
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        #wrap .content .right ul.img li.on {
            display: block;
        }
        #wrap .content .right ul.tab {
            position: absolute;
            bottom: 5px;
            left: 10px;
            width: 100%;
            height: 20px;
        }
        #wrap .content .right ul.tab li {
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #000;
            color: #fff;
            text-align: center;
            font-size: 12px;
            margin-right: 10px;
        }
        #wrap .content .right ul.tab li.on {
            background-color: #f60;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <!--左侧tab按钮-->
        <div class="leftTab">
            <ul>
                <li class="on">豪车</li>
                <li>美味</li>
                <li>科比</li>
            </ul>
        </div>

        <!--右侧三个显示区域-->
        <div class="content">
            <!--豪车-->
            <div class="right on">
                <ul class="img">
                    <li class="on"><img src="img/saiche1.jpg" alt=""></li>
                    <li><img src="img/saiche2.jpg" alt=""></li>
                    <li><img src="img/saiche3.jpg" alt=""></li>
                </ul>
                <ul class="tab">
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <!--美味-->
            <div class="right">
                <ul class="img">
                    <li class="on"><img src="img/meishi1.png" alt=""></li>
                    <li><img src="img/meishi2.jpg" alt=""></li>
                    <li><img src="img/meishi3.jpg" alt=""></li>
                </ul>
                <ul class="tab">
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <!--科比-->
            <div class="right">
                <ul class="img">
                    <li class="on"><img src="img/kobe1.jpeg" alt=""></li>
                    <li><img src="img/kobe2.jpg" alt=""></li>
                    <li><img src="img/kobe3.jpg" alt=""></li>
                </ul>
                <ul class="tab"> 
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        (function() {
                let aLeftTab = document.querySelectorAll("#wrap .leftTab li"),
                    aRightContent = document.querySelectorAll("#wrap .content .right"),
                    aImg = document.querySelectorAll("#wrap .content .img"),
                    aTab = document.querySelectorAll("#wrap .content .tab"),
                    index = 0, //用来辨别左右大的选项卡对应的显示序号;
                    len = aLeftTab.length,
                    aIndex = [0,0,0];

                //左侧tab控制右侧content的显示
                function leftTab(i) {
                    aLeftTab[i].onclick = function() {
                        if (index === i) {return;}
                        aLeftTab[index].className = "";
                        aRightContent[index].className = "right";
                        index = i;
                        aLeftTab[index].className = "on";
                        aRightContent[index].className = "right on";           
                    
                        //右侧对应的内容部分回归到第0的位置
                        let aImgLi = aImg[i].querySelectorAll("li"),
                        aTabLi = aTab[i].querySelectorAll("li");
                        aTabLi[aIndex[i]].className = "";
                        aImgLi[aIndex[i]].className = "";
                        aIndex[i] = 0;
                        aTabLi[aIndex[i]].className = "on";
                        aImgLi[aIndex[i]].className = "on";
                        
                    };
                }
                
                 //右侧的每一块都初始添加tab控制img的事件
                function rightTab(i) {
                    let aImgLi = aImg[i].querySelectorAll("li"),
                        aTabLi = aTab[i].querySelectorAll("li"),
                        len1 = aImgLi.length;

                    for(let j=0;j<len1;j++) {
                        aTabLi[j].onclick = function() {
                            if(j === aIndex[i]) {return;}
                            aTabLi[aIndex[i]].className = "";
                            aImgLi[aIndex[i]].className = "";
                            aIndex[i] = j;
                            aTabLi[aIndex[i]].className = "on";
                            aImgLi[aIndex[i]].className = "on";
                        };
                    }
                }

                //左侧tab控制右侧内容的显示
                for(let i=0;i<len;i++) {
                    leftTab(i);
                    rightTab(i);               
                }

                //因为初始如果不点击左侧，那么右侧就没有事件，我们需要自执行一次给右侧赋予一个初始的事件
                // addRightEvent(0);
                // addRightEvent(1);
                // addRightEvent(2);

                      
            }
        )();
    </script>
</body>
</html>